import React from 'react';

import EditTagModal from './EditTagModal';
import { message,Modal } from 'antd';

/**
 * 方案标签组件
 *
 * @class ProjectTag
 * @extends {Component}
 */
class ProjectTag extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            tagListData:[],
            addCaseName:'',
            visible:false
        }
    }

    componentDidMount(){
        const { fatchTagList } = this.props;
        fatchTagList({});
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.tagListData.data){
            this.setState({
                tagListData:nextProps.tagListData.data
            })
        }
    }

    addCaseChange = (e)=>{
        this.setState({
            addCaseName:e.target.value
        })
    }

    saveCase = ()=>{
            const data = {
                name:this.state.addCaseName
            }
            const { fatchAddCase } = this.props;
            console.log(fatchAddCase)
            fatchAddCase(data).then((res)=>{
                if(res.data.code == 200){
                    message.success('操作成功！');
                }
            })
    }

    addTagCase = ()=>{
            let addCaseData = {
                type_name:'',
                type_id:'',
                case_tag:'',
                put_in:true
            }
            this.setState({
                tagListData:[...this.state.tagListData,addCaseData]
            })
    }

    editCase(id){
        this.setState({
            visible:true,
            caseId:id
        })
    }

    ModalOk = (e) => {
        this.setState({
        visible: false,
        });
    }
    ModalCancel = (e) => {
        this.setState({
        visible: false,
        });
    }

    render(){
        const { pageNum,tagListData,visible,caseId } = this.state;
        const { fatchCaseList } = this.props;
        const putInstate = (item)=>(
            <div className="tag-case-head center-b-box cc f18">
                <input autoFocus="true" type="text" className="form-control w150" placeholder="输入标签类型名称"
                onChange={this.addCaseChange} />
                <button className="bt w70 h30 f14" onClick={this.saveCase}>保存</button>
            </div>
        );
        const showState = (item)=>(
            <div className="tag-case-head center-b-box cc f18">
                <span>{item.type_name}</span>
                <button className="bt w70 h30 f14" onClick={()=>this.editCase(item.type_id)}>编辑</button>
            </div>
        );
        return(
            <div className="project-tag mt10 p20 bcf">
                <EditTagModal
                visible={visible}
                handleOk={this.ModalOk}
                handleCancel={this.ModalCancel}
                fatchCaseList={fatchCaseList}
                caseId={caseId}></EditTagModal>

                <div className="center-start wrap">
                    {
                        tagListData.map((item,i)=>{
                            return(
                                <div key={i} className="tag-case mr20 mb20">
                                    {
                                        item.put_in ? putInstate(item) :  showState(item)
                                    }
                                    <div className="tag-list">
                                        {
                                            item.case_tag && item.case_tag.map((item,i)=>(
                                                <span key={i} className="f16 c3">#{item.tag_name}</span>
                                            ))
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                    <div className="add-case center-box w500 h300">
                        <button className="bt w120 h40 f18" onClick={this.addTagCase}>+ 添加</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default ProjectTag;